<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scorll">
			<view class="content">
				<view class="card_Head" :style="{marginTop: boundRect_top + 'px'}">
					<view class="card_Head_edit">
						<image :src="staticUrl + '/image/mine/icon_cutUser.png'" style="width: 209rpx;height: 62rpx;"
							@click="cutUser()"></image>
						<!-- <image :src="staticUrl + '/image/mine/icon_edit.png'" style="width: 169rpx;height: 30rpx;margin-right: 52rpx;" @click="toEditInfo()"></image> -->
					</view>
					<!-- 无网络的提示 -->
					<view v-show="!isNet" class="flex-c"
						style="width: 750rpx;background-color: white;margin: 20rpx auto;">
						<image class="NetState" :src="staticUrl + '/image/img_noNet.png'" mode=""></image>
					</view>
					<!-- <image src="../../static/image/mine/icon_head.png" style="width: 233rpx;height: 233rpx;"></image> -->
					<image :src="imgSrc" style="margin-top: 30rpx;width: 233rpx;height: 233rpx;border-radius: 50%;"
						@click="updatePortrait()" id="file"></image>
					<view class="card_Head_text">
						<text class="card_Head_text_t1">{{ Name }}</text>
						<text class="card_Head_text_t2">{{ phone }}</text>
					</view>
				</view>
				<view class="card_minicard">
					<!-- 今日使用 -->
					<view class="card_minicard-item" @click="toTodayUse()">
						<view class="card_minicard_top MT47 ML37">
							<view class="columnLine"></view>
							<text>今日使用</text>
						</view>
						<text class="card_minicard-itemT1 ML37 MB40">
							{{ usetime }}
							<text class="card_minicard-itemT2">分钟</text>
						</text>
					</view>

					<view class="card_minicard-item" @click="tomyDoll()">
						<view class="card_minicard_top MT47 ML37">
							<view class="columnLine"></view>
							<text>我的爱豆</text>
						</view>
						<text class="card_minicard-itemT1 ML37 MB40">
							{{ totalDoll }}
							<text class="card_minicard-itemT2">个</text>
						</text>
					</view>
				</view>
				<!-- 5/7  -->
				<view v-if="isMarkUser" class="signView" @click="tosignInRecord()">
					<view class="signViewL">
						<image :src="staticUrl + '/image/mine/icon_detection.png'" mode="widthFix"></image>
						<text class="signViewT">您已有效上传</text>
						<text class="weeks">{{weeks<10?"0"+weeks:weeks}}</text>
						<text class="signViewT">周数据</text>
					</view>
					<image :src="staticUrl + '/image/mine/icon_arrow.png'"
						style="margin-right: 45rpx;width: 17rpx;height: 32rpx;"></image>
				</view>

				<view class="card_list">
					<!-- items -->
					<view class="card_list_item" @click="toRecharge()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_recharge.png'"
								style="width: 41rpx;height: 33rpx;"></image>
							<text>充值中心</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<!-- <view class="card_list_item" @click="toMaks()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_task.png'" style="width: 40rpx;height: 37rpx;">
							</image>
							<text>任务中心</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view> -->
					<view class="card_list_item" @click="toMyOrder()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_order.png'" style="width: 38rpx;height: 40rpx;">
							</image>
							<text>我的订单</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<view class="card_list_item" @click="toEditInfo()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_editInfo.png'"
								style="width: 39rpx;height: 39rpx;"></image>
							<text>编辑资料</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<view class="card_list_item" @click="toMemberManager()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_member.png'" style="width: 39rpx;height: 39rpx;">
							</image>
							<text>成员管理</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<view class="card_list_item" @click="toBgm()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_bgm.png'" style="width: 35rpx;height: 41rpx;">
							</image>
							<text>背景音乐</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<view class="card_list_item" @click="toUseExplain()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_use.png'" style="width: 39rpx;height: 39rpx;">
							</image>
							<text>使用说明</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
					<view class="card_list_item" style="margin-bottom: 40rpx;" @click="toSysSetting()">
						<view class="card_list_item_L">
							<image :src="staticUrl + '/image/mine/icon_setting.png'"
								style="width: 37rpx;height: 39rpx;"></image>
							<text>系统设置</text>
						</view>
						<image :src="staticUrl + '/image/mine/icon_arrow.png'" style="width: 17rpx;height: 32rpx;">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// const pushLive = uni.requireNativePlugin('service-keep-live');
	const app = getApp();
	import * as api from '@/api/login';
	import config from '@/config.js';
	import regular from '@/api/regular';
	import {
		mapState
	} from 'vuex'; //引入mapState
	import store from '../../store';
	export default {
		data() {
			return {
				staticUrl: this.$config.StaticUrl,
				boundRect_top: app.globalData.boundRect_top,
				calc1: '',
				userId: '', //。。。
				imgSrc: '',
				Name: '',
				phone: '',
				usetime: 0,
				serviceId: '',
				BindServiceMsg: '', //用户是否绑定了服务
				totalDoll: '', //我的爱豆，总计（监测 + 商城）
				myDoll: {},
				userInfo: {},
				isRefresh: 0, //是否刷新完毕
				useInfoList: [], //用户今日使用的明细
				isMarkUser: null,
				weeks: 0,

			};
		},
		// listening ...
		computed: {
			...mapState({
				isNet: function(state) {
					return state.isNet;
				}
			})
		},
		onLoad() {
			console.log('onload!');
			this.userId = this.$store.state.userInfo.currentUser.userId;
			// 获取用户的一些信息
			this.getHeadshot();
			this.getTodayUseTime();
			this.getPurseInfo();
			this.getUserInfo(1);
			// 在此处监听所有的和爱豆相关的操作
			let that = this;
			uni.$on('updatePurseInfo', function(data) {
				console.log('on 的全局监听');
				that.getPurseInfo();
			});
		},
		onShow() {
			this.getTodayUseTime();
		},
		onPullDownRefresh() {
			let that = this;
			console.log(that.isRefresh);
			this.userId = this.$store.state.userInfo.currentUser.userId;
			// 获取用户的一些信息
			this.getHeadshot();
			this.getTodayUseTime();
			this.getPurseInfo();
			this.getUserInfo(1);
			if (this.isRefresh == 4) {
				this.isRefresh = 0;
				uni.stopPullDownRefresh();
			} else {
				// uni.showToast({
				// 	title: '刷新失败,请重试！',
				// 	icon: 'loading'
				// });
				let T = setTimeout(function() {
					uni.stopPullDownRefresh();
					clearTimeout(T);
					that.isRefresh = 0;
				}, 2000);
			}
		},
		methods: {
			// 切换用户
			cutUser() {
				uni.navigateTo({
					url: 'cutUser/cutUser'
				});
			},
			// 获取用户头像
			getHeadshot() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getHeadshot'
				};
				//调用接口请求个人信息
				api.getHeadshot(data).then(function(res) {
					console.log(res);
					if (res.data.code == 2000) {
						that.imgSrc = res.data.data.shotBase64;
						that.isRefresh++;
					}
				}).catch(function(error) {
					console.log('getHeadshot fail', error);
				});
			},
			// 获取用户个人信息
			getUserInfo(type) {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getUserInfo'
				};
				//调用接口请求个人信息
				api.getUserInfo(data)
					.then(function(res) {
						console.log('getUserInfo::', res);
						if (res.data.code == 2000) {
							that.Name = res.data.data.neckName;
							that.phone = res.data.data.phone;
							that.userInfo = res.data.data;
							if (type == 1) {
								that.isRefresh++;
							}
							that.getServiceWeekRecord(res.data.data.serviceId)
							that.getServiceWeekHistoryRecord(res.data.data.serviceId)
						}
					})
					.catch(function(error) {
						console.log('getUserInfo fail', error);
					});
			},
			// 获取当前周的完成情况
			getServiceWeekRecord(serviceId){
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					params: serviceId
				};
				api.getServiceWeekRecord(data).then(function(res) {
					console.log('getServiceWeekRecord: ', res);
					if(res.data.success) {
						that.isMarkUser = true
					}else {
						that.isMarkUser = false
					}
				}).catch(function(error) {
					console.log('getPurseInfo fail', error);
				});
			},
			getServiceWeekHistoryRecord(serviceId) {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					params: serviceId
				};
				api.getServiceWeekHistoryRecord(data).then(function(res) {
					console.log('getServiceWeekHistoryRecord res: ', res);
					if (res.data.success) {
						let _weeks = 0
						res.data.data.recordList.forEach((item, index) => {
							if (item.isCompleted) {
								_weeks++
							}
						})
						that.weeks = _weeks
					} 
				}).catch(function(error) {
					console.log('getPurseInfo fail', error);
				});
			},
			// 获取今日使用时长
			getTodayUseTime() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getTodayUseTime'
				};
				api.getTodayUseTime(data)
					.then(function(res) {
						console.log('getTodayUseTime::', res);
						if (res.data.code == 2000) {
							// console.log('getTodayUseTime::', res.data.data.todayUseInfo.useInfoList);
							that.serviceId = res.data.data.todayUseInfo.serviceId
							that.useInfoList = res.data.data.todayUseInfo.useInfoList;
							that.usetime = res.data.data.todayUseInfo.totalTime;
						}
						that.isRefresh++;
					})
					.catch(function(error) {
						console.log('getTodayUseTime fail', error);
					});
			},
			// 获取用户和服务钱包信息
			getPurseInfo() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getPurseInfo'
				};
				api.getPurseInfo(data)
					.then(function(res) {
						console.log('getPurseInfo::', res);
						if (res.data.code === 2001) {
							that.BindServiceMsg = res.data.message;
						}
						if (res.data.code == 2000) {
							that.myDoll = res.data.data;
							that.BindServiceMsg = '';
							that.totalDoll = regular.numFormat(res.data.data.servicePurse + res.data.data.userPurse);
						}
						that.isRefresh++;
					})
					.catch(function(error) {
						console.log('getPurseInfo fail', error);
					});
			},
			// 编辑个人资料
			toEditInfo() {
				let that = this;
				uni.$once('updateUserInfo', function(data) {
					console.log('once');
					that.getUserInfo(0);
				});
				let userInfo = this.userInfo;
				uni.navigateTo({
					url: 'editInfo/editInfo?userInfo=' + JSON.stringify(userInfo)
				});
			},
			// 更换头像
			updatePortrait() {
				let that = this;
				let userId = this.userId;
				let src = config.HttpUrl;
				uni.chooseImage({
					count: 1,
					crop: {
						width: 250,
						height: 250,
						resize: true
					},
					success(res) {
						console.log('res,', res);
						that.imgSrc = res.tempFilePaths[0];
						// 上传到服务器
						uni.uploadFile({
							url: src + '/user-app-service/EiUser/updateHeadshot?userId=' + userId +
								'&action=updateHeadshot',
							fileType: 'image',
							header: {
								'Content-Type': 'multipart/form-data'
							},
							name: 'multipartFile', //后端通过'file'获取上传的文件对象
							// formData: this.sendDate,
							filePath: res.tempFilePaths[0],
							success(upload) {
								console.log(upload);
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			// 今日使用
			toTodayUse() {
				let useInfoList = this.useInfoList;
				uni.navigateTo({
					url: 'useRecord/useRecord?useInfoList=' + JSON.stringify(useInfoList)
				});
			},
			// 我的爱豆
			tomyDoll() {
				let that = this;
				if (that.BindServiceMsg != '') {
					uni.showToast({
						title: that.BindServiceMsg,
						icon: 'none'
					});
					return;
				}
				let myDoll = that.myDoll;
				uni.navigateTo({
					url: 'myDoll/myDoll?myDoll=' + JSON.stringify(myDoll)
				});
			},
			tosignInRecord(){
				uni.navigateTo({
					url: 'signInRecord/signInRecord?serviceId=' + this.serviceId
				});
			},
			// 充值中心
			toRecharge() {
				console.log('充值中心');
				let _this = this;
				uni.navigateTo({
					url: 'rechargeCenter/rechargeCenter?phone=' + _this.phone
				});
			},
			// 任务中心
			toMaks() {
				uni.navigateTo({
					url: 'maskCenter/maskCenter'
				});
			},
			// 我的订单
			toMyOrder() {
				console.log('我的订单');
				uni.navigateTo({
					url: 'myOrder/myOrder'
				});
			},
			toMemberManager() {
				console.log('成员管理');
				uni.navigateTo({
					url: 'memberManager/memberManager'
				});
			},
			toBgm() {
				console.log('背景音乐');
				uni.navigateTo({
					url: 'bgm/bgm'
				});
			},
			toUseExplain() {
				console.log('使用说明');
				// uni.navigateTo({
				// 	url: 'productDes/productDes'
				// });
				uni.navigateTo({
					url: 'productDes/videoPage/videoPage'
				});
			},
			toSysSetting() {
				console.log('系统设置');
				let that = this;
				uni.$once('updateUserInfo', function(data) {
					if (data) that.getUserInfo(0);
				});
				uni.navigateTo({
					url: 'systemSetting/systemSetting'
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scorll {
		width: 750rpx;
		/* height: calc(100vh - var(--status-bar-height)); */
		/* margin-top: calc(var(--status-bar-height)); */
	}

	.NetState {
		/* margin-top: 35rpx; */
		width: 686rpx;
		height: 48rpx;
	}

	.card_Head {
		/* position: absolute; */
		width: 750rpx;
		/* height: 512rpx; */
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.card_Head_edit {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card_Head_text {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 58rpx;
	}

	.card_Head_text_t1 {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
	}

	.card_Head_text_t2 {
		font-size: 32rpx;
		font-family: Roboto;
		font-weight: normal;
		color: #000000;
	}

	.card_minicard {
		width: 702rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card_minicard-item {
		width: 340rpx;
		height: 280rpx;
		background-color: #ffffff;
		border-radius: 15px 50px 15px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.card_minicard_top {
		display: flex;
		align-items: center;
	}

	.card_minicard_top text {
		margin-left: 17rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
	}

	.columnLine {
		width: 10rpx;
		height: 35rpx;
		background-color: #0659c7;
		border-radius: 15px;
	}

	.card_minicard-itemT1 {
		font-size: 58rpx;
		font-family: Roboto;
		font-weight: bold;
		color: #0659c7;
	}

	.card_minicard-itemT2 {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #0659c7;
		margin-left: 17rpx;
	}

	.card_list {
		margin-top: 32rpx;
		width: 700rpx;
		height: auto;
		background-color: #ffffff;
		border-radius: 15px;
		margin-bottom: 50rpx;
	}

	.card_list_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 75rpx 47rpx auto;
	}

	.card_list_item:active {
		background-color: #e6e6e6;
	}

	.card_list_item_L {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card_list_item_L text {
		margin-left: 33rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
	}

	.MT80 {
		margin-top: 80rpx;
	}

	.MT47 {
		margin-top: 47rpx;
	}

	.MB40 {
		margin-bottom: 40rpx;
	}

	.ML37 {
		margin-left: 37rpx;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.signView {
		margin-top: 20rpx;
		width: 700rpx;
		height: 184rpx;
		background-color: #ffffff;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.signViewL image {
		margin-right: 24rpx;
		width: 61rpx;
		animation: rotate 0.8s ease;
	}

	.signViewL {
		margin-left: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.signViewT {
		font-size: 38rpx;
		font-weight: bold;
		color: #000000;
	}

	.weeks {
		margin: 0 20rpx;
		font-size: 58rpx;
		font-weight: bold;
		color: #0659c7;
		font-style: italic;
	}
</style>